Web Storage API হল একটি JavaScript API যা ব্রাউজারের মধ্যে ডেটা সংরক্ষণ এবং অ্যাক্সেস করার সুবিধা দেয়। এটি মূলত দুটি অংশে বিভক্ত: localStorage এবং sessionStorage। এই API ব্যবহার করে, ডেভেলপাররা ব্রাউজারের মধ্যে ডেটা দীর্ঘমেয়াদী (localStorage) বা সাময়িক (sessionStorage) সংরক্ষণ করতে পারে, যা পেজ রিফ্রেশ বা সেশন শেষ হওয়ার পরও ঐ ডেটা টিকে থাকে।
Web Storage API ব্রাউজারের স্টোরেজ সিস্টেমের মাধ্যমে ব্যবহারকারী ডেটা নিরাপদে সংরক্ষণ করতে সহায়তা করে, যা ব্যবহারকারীর প্রেফারেন্স, লগইন তথ্য, বা অন্যান্য প্রয়োজনীয় ডেটা এক্সেস করা যায়। এটি কুকির তুলনায় আরও বড় পরিমাণ ডেটা সংরক্ষণ করতে সক্ষম।
localStorage ব্যবহার করে ডেটা আপনি দীর্ঘমেয়াদীভাবে (যতক্ষণ না ব্যবহারকারী ব্রাউজারের ক্যাশ পরিষ্কার করে) সংরক্ষণ করতে পারেন। ডেটা সংরক্ষণ করার পর এটি ব্রাউজারের মাঝে থেকে যায় এবং আপনি বিভিন্ন পেজে এটি অ্যাক্সেস করতে পারবেন।
// ডেটা সংরক্ষণ
localStorage.setItem("username", "JohnDoe");
// ডেটা পড়া
let username = localStorage.getItem("username");
console.log(username); // আউটপুট: JohnDoe
// ডেটা মুছে ফেলা
localStorage.removeItem("username");
// সব ডেটা মুছে ফেলা
localStorage.clear();
এখানে, setItem() মেথড দিয়ে ডেটা সংরক্ষণ, getItem() দিয়ে ডেটা পড়া এবং removeItem() বা clear() দিয়ে ডেটা মুছে ফেলা হচ্ছে।
sessionStorage এর মাধ্যমে ডেটা শুধু এক সেশনের জন্য (যতক্ষণ না ব্রাউজার বন্ধ করা হয়) সংরক্ষিত থাকে। এটি মূলত এক পেজ লোড থেকে অন্য পেজ লোডে ডেটা শেয়ার করতে ব্যবহৃত হয়, তবে ব্রাউজার বন্ধ করার পর ডেটা মুছে যায়।
// ডেটা সংরক্ষণ
sessionStorage.setItem("sessionID", "123456");
// ডেটা পড়া
let sessionID = sessionStorage.getItem("sessionID");
console.log(sessionID); // আউটপুট: 123456
// ডেটা মুছে ফেলা
sessionStorage.removeItem("sessionID");
// সব ডেটা মুছে ফেলা
sessionStorage.clear();
এখানে, sessionStorage ব্যবহার করে ডেটা শুধুমাত্র বর্তমান সেশনের জন্য সংরক্ষিত হচ্ছে এবং ব্রাউজার বন্ধ হওয়ার পর সব ডেটা মুছে যাবে।
localStorage এবং sessionStorage প্রতিটি সাধারণত ৫ মেগাবাইট (MB) পর্যন্ত ডেটা সংরক্ষণ করতে সক্ষম। তবে, সঠিক সীমা ব্রাউজার অনুসারে পরিবর্তিত হতে পারে। এই সাইজ সীমা কুকির তুলনায় অনেক বেশি, যা ওয়েব অ্যাপ্লিকেশনগুলোর জন্য বড় সুবিধা।
Web Storage API শুধুমাত্র স্ট্রিং (string) ধরনের ডেটা সংরক্ষণ করতে পারে। তবে, জটিল ডেটা স্ট্রাকচার যেমন অবজেক্ট বা অ্যারে সংরক্ষণের জন্য আপনাকে JSON সিরিয়ালাইজেশন ব্যবহার করতে হবে।
let user = { name: "John", age: 30 };
// JSON.stringify() দিয়ে অবজেক্টকে স্ট্রিংয়ে রূপান্তর
localStorage.setItem("user", JSON.stringify(user));
// JSON.parse() দিয়ে স্ট্রিংকে অবজেক্টে রূপান্তর
let storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.name); // আউটপুট: John
এখানে, JSON.stringify() দিয়ে অবজেক্টকে স্ট্রিংয়ে রূপান্তরিত করা হয়েছে এবং JSON.parse() দিয়ে স্ট্রিং থেকে অবজেক্ট তৈরি করা হয়েছে।
localStorage দিয়ে ডেটা দীর্ঘমেয়াদীভাবে সংরক্ষণ করা যায়, যা ব্রাউজার বন্ধ করা হলেও অক্ষত থাকে।sessionStorage দিয়ে ডেটা শুধুমাত্র বর্তমান সেশনের জন্য সংরক্ষিত থাকে, যা পেজ রিফ্রেশ হলে অক্ষত থাকে।getItem(), setItem(), removeItem(), এবং clear() মেথড দিয়ে ডেটা সহজে অ্যাক্সেস এবং ম্যানিপুলেট করা যায়।Web Storage API হল একটি অত্যন্ত কার্যকরী টুল যা ব্রাউজারে ডেটা সংরক্ষণ করতে সাহায্য করে। এর মাধ্যমে আপনি দুটি স্টোরেজ সিস্টেম — localStorage এবং sessionStorage ব্যবহার করে ডেটা সংরক্ষণ ও অ্যাক্সেস করতে পারেন। localStorage দ্বারা ডেটা দীর্ঘমেয়াদীভাবে এবং sessionStorage দ্বারা সাময়িকভাবে সংরক্ষিত থাকে। এই API দিয়ে আপনি আপনার অ্যাপ্লিকেশনে ব্যবহারকারীর প্রেফারেন্স, লগইন তথ্য, এবং অন্যান্য প্রয়োজনীয় ডেটা সংরক্ষণ করতে পারবেন। JSON সিরিয়ালাইজেশন ব্যবহারের মাধ্যমে আপনি জটিল ডেটা স্ট্রাকচারও সংরক্ষণ করতে পারেন।
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
